```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JxBrowser Gallery - 现代Java桌面应用开发解决方案</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .feature-icon {
            font-size: 2.5rem;
            color: #6e8efb;
            margin-bottom: 1rem;
        }
        .divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(110,142,251,0.5) 50%, rgba(0,0,0,0) 100%);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">JxBrowser Gallery</h1>
                    <h2 class="text-xl md:text-2xl font-medium mb-6">现代Java桌面应用开发的终极解决方案</h2>
                    <p class="text-lg mb-8 opacity-90">通过强大的Chromium引擎，将Web技术的灵活性与Java的稳定性完美结合，为您的桌面应用带来无限可能。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/TeamDev-IP/JxBrowser-Gallery/tree/master/desktop-web-app" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub仓库
                        </a>
                        <a href="#getting-started" class="bg-indigo-700 hover:bg-indigo-800 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fas fa-rocket mr-2"></i> 快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-full h-full border-2 border-indigo-200 rounded-lg"></div>
                        <img src="https://github.com/TeamDev-IP/JxBrowser-Gallery/blob/master/desktop-web-app/.github/readme-resources/prefs.png?raw=true" alt="JxBrowser示例界面" class="relative rounded-lg shadow-2xl w-full">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Solution Section -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题</h2>
                <div class="divider w-24 h-1 mx-auto my-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-600">传统桌面应用开发中，您是否也面临这些挑战？</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-10">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">传统开发痛点</h3>
                    </div>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mr-2 mt-1"></i>
                            <span>构建动态UI需要复杂框架，开发周期长</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mr-2 mt-1"></i>
                            <span>Web技术(WebGL, WebRTC)难以直接嵌入</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mr-2 mt-1"></i>
                            <span>跨平台适配困难，维护成本高</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mr-2 mt-1"></i>
                            <span>调试复杂，开发效率低下</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">JxBrowser解决方案</h3>
                    </div>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>通过示例展示最佳实践，简化开发流程</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>无缝集成WebGL、WebRTC等现代Web技术</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>跨平台兼容，支持Swing/JavaFX/Compose</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>提供完整示例，降低学习曲线</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-6 bg-gray-100">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <div class="divider w-24 h-1 mx-auto my-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-600">探索JxBrowser Gallery提供的强大功能，加速您的Java桌面应用开发</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-cube"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">WebGL 集成</h3>
                    <p class="text-gray-600">Pomodoro示例展示在桌面应用中嵌入3D模型，增强视觉体验，为您的应用带来惊艳的3D效果。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-video"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">WebRTC 支持</h3>
                    <p class="text-gray-600">屏幕共享示例实现实时视频流，适合协作工具开发，轻松构建远程会议应用。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据可视化</h3>
                    <p class="text-gray-600">利用HTML/CSS/JS快速构建交互式仪表盘，简化复杂UI开发，动态呈现业务数据。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">跨平台兼容</h3>
                    <p class="text-gray-600">支持Swing、JavaFX、Compose等UI框架，适配Windows、macOS和Linux多平台。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-file-export"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">HTML 导出</h3>
                    <p class="text-gray-600">将Web内容转为PNG/PDF格式，满足报表生成需求，轻松创建专业文档。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-sliders-h"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">灵活配置</h3>
                    <p class="text-gray-600">提供丰富的API和配置选项，让您完全控制浏览器行为和用户界面。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <div class="divider w-24 h-1 mx-auto my-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-600">JxBrowser Gallery适用于各种Java桌面应用开发场景</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 p-8 rounded-xl border-l-4 border-indigo-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4">效率工具开发</h3>
                    <p class="text-gray-600 mb-4">用Pomodoro示例快速构建带WebGL的时间管理应用，提升用户生产力。</p>
                    <div class="flex items-center text-indigo-600 font-medium">
                        <span>查看示例</span>
                        <i class="fas fa-arrow-right ml-2"></i>
                    </div>
                </div>
                
                <div class="bg-blue-50 p-8 rounded-xl border-l-4 border-blue-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4">协作应用</h3>
                    <p class="text-gray-600 mb-4">通过WebRTC实现屏幕共享，适合开发远程会议和团队协作工具。</p>
                    <div class="flex items-center text-blue-600 font-medium">
                        <span>查看示例</span>
                        <i class="fas fa-arrow-right ml-2"></i>
                    </div>
                </div>
                
                <div class="bg-purple-50 p-8 rounded-xl border-l-4 border-purple-500 card-hover">
                    <h3 class="text-xl font-semibold mb-4">数据展示</h3>
                    <p class="text-gray-600 mb-4">为企业开发交互式仪表盘，动态呈现业务数据，助力决策分析。</p>
                    <div class="flex items-center text-purple-600 font-medium">
                        <span>查看示例</span>
                        <i class="fas fa-arrow-right ml-2"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-6 bg-gray-100">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <div class="divider w-24 h-1 mx-auto my-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-600">为什么选择JxBrowser Gallery加速您的开发流程？</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-md mb-8 card-hover">
                        <h3 class="text-xl font-semibold mb-4">多样化示例</h3>
                        <p class="text-gray-600">JxBrowser Gallery提供丰富的示例项目，覆盖WebGL、WebRTC等前沿技术，从入门到高级应用一应俱全。</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                        <h3 class="text-xl font-semibold mb-4">Java生态集成</h3>
                        <p class="text-gray-600">相比Electron，JxBrowser与Java生态系统集成更自然，性能优化更适合桌面应用场景，资源占用更少。</p>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-md mb-8 card-hover">
                        <h3 class="text-xl font-semibold mb-4">Chromium引擎</h3>
                        <p class="text-gray-600">基于强大的Chromium浏览器引擎，支持最新的Web标准和技术，确保您的应用拥有现代浏览器的所有能力。</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                        <h3 class="text-xl font-semibold mb-4">专业支持</h3>
                        <p class="text-gray-600">由TeamDev提供专业支持，定期更新维护，确保与最新Java版本和操作系统兼容。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tech Diagram -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">技术架构</h2>
                <div class="divider w-24 h-1 mx-auto my-6"></div>
                <p class="max-w-3xl mx-auto text-lg text-gray-600">JxBrowser如何将Web技术与Java桌面应用无缝融合</p>
            </div>
            
            <div class="mermaid">
                graph TD
                    A[Java应用] -->|JxBrowser API| B[Chromium引擎]
                    B --> C[WebGL]
                    B --> D[WebRTC]
                    B --> E[HTML5]
                    B --> F[CSS3]
                    B --> G[JavaScript]
                    A --> H[Swing/JavaFX/Compose]
                    A --> I[Java业务逻辑]
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section id="getting-started" class="py-16 px-6 bg-indigo-700 text-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <div class="divider w-24 h-1 mx-auto my-6 bg-white opacity-50"></div>
                <p class="max-w-3xl mx-auto text-lg opacity-90">只需简单几步，即可开始使用JxBrowser Gallery</p>
            </div>
            
            <div class="grid md:grid-cols-4 gap-6">
                <div class="bg-indigo-600 p-6 rounded-lg text-center card-hover">
                    <div class="text-3xl mb-4 font-bold">1</div>
                    <h3 class="text-xl font-semibold mb-3">克隆仓库</h3>
                    <p class="opacity-90">获取最新示例代码</p>
                    <div class="mt-4 bg-indigo-800 p-3 rounded-md font-mono text-sm">
                        git clone https://github.com/TeamDev-IP/JxBrowser-Gallery
                    </div>
                </div>
                
                <div class="bg-indigo-600 p-6 rounded-lg text-center card-hover">
                    <div class="text-3xl mb-4 font-bold">2</div>
                    <h3 class="text-xl font-semibold mb-3">获取许可证</h3>
                    <p class="opacity-90">申请30天免费试用或购买正式版</p>
                </div>
                
                <div class="bg-indigo-600 p-6 rounded-lg text-center card-hover">
                    <div class="text-3xl mb-4 font-bold">3</div>
                    <h3 class="text-xl font-semibold mb-3">配置环境</h3>
                    <p class="opacity-90">准备Java 17+环境和Gradle</p>
                </div>
                
                <div class="bg-indigo-600 p-6 rounded-lg text-center card-hover">
                    <div class="text-3xl mb-4 font-bold">4</div>
                    <h3 class="text-xl font-semibold mb-3">运行示例</h3>
                    <p class="opacity-90">启动并探索各种功能</p>
                    <div class="mt-4 bg-indigo-800 p-3 rounded-md font-mono text-sm">
                        ./gradlew run
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```